<template>
    <div class="">
        <div class="g-topNavbar">
            <h3>优晟金服车贷管理系统</h3>
            <el-menu :default-active="activeIndex"   class="el-menu-demo" mode="horizontal" @select="handleSelect" ref="elMenu">
                <!--用户名-->
                <el-menu-item index="1"><i class="el-icon-fa-user"></i>{{userName}}</el-menu-item>

                <!--消息/暂时不开发此功能，先保留-->
                <!--<el-menu-item index="2">-->
                <!--<el-badge :value="3"></el-badge>-->
                <!--<i class="el-icon-fa-comments-o"></i>消息-->
                <!--</el-menu-item>-->

                <!--修改密码-->

                <el-menu-item index="3" @click="FormVisible = true"><i class="el-icon-fa-key"></i>修改密码</el-menu-item>


                <!--退出登录-->
                <el-menu-item index="4" @click="signOut()"><i class="el-icon-fa-sign-out"></i>退出登录</el-menu-item>
            </el-menu>
        </div>
        <el-dialog
            title="修改密码"
            :visible.sync="FormVisible"
            :modal-append-to-body='false'
            >
            <el-form :model="formData" width="400">
                <div class="m-reset-form">
                    <el-form-item required label="用户手机" label-width="120px">
                        <el-input v-model="formData.phone"></el-input>
                    </el-form-item>
                    <el-form-item required label="原密码" label-width="120px">
                        <el-input v-model="formData.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item required label="新密码" label-width="120px">
                        <el-input v-model="formData.newPassWord" auto-complete="off" type="password"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="FormVisible = false">取 消</el-button>
                <el-button type="primary" @click="resetPassword">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="es6">
import axo from "@/assets/js/axo";
import {
    mapGetters,
    mapActions
} from "vuex";
import cookie from "js-cookie";
export default {
    data () {
        return {
            activeIndex: "1",
            userName: "用户名",
            FormVisible: false,
            formData: {}
        };
    },
    computed: {
        ...mapGetters([ // 加载从getters上绑定的状态值
            "sysUser",
        ])
    },
    mounted: function () {
        this.$nextTick(function () {
            this.userName = this.sysUser?this.sysUser.name:this.userName;
        });
    },
    watch: {
        FormVisible: function(val, oldVal){
            // console.log('>>>', val);
            if(!val){
                this.$refs.elMenu.activeIndex = '1';
            }
        }
    },
    methods: {
        ...mapActions([
            "loginState",
            "keepUserAuth",
            "keepSysUser",
            "keepTokenId"
        ]),
        handleSelect (key, keyPath) {
            // console.log(key, keyPath);
            // console.log(key);
        },
        // 重设密码
        resetPassword () {
            console.log(this.formData);
            axo({
                method: 'post',
                url: '/api-sys/user/editPassWord',
                data: {
                    "platformNo": "1",
                    "body": {
                        phone: this.formData.phone,
                        password: this.formData.password,
                        newPassWord: this.formData.newPassWord
                    }
                }
            }).then((res) => {
                console.log(res);
                if(res.data.state.code === "200"){
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        duration: 800
                    });
                    this.FormVisible = false;
                }else{
                    this.$message({
                        message: res.data.state.message,
                        type: 'error',
                        duration: 800
                    });
                }
            });
        },
        // 退出登录
        signOut () {
            this.$confirm("是否退出登录？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$message({
                    type: "success",
                    message: "退出成功!",
                    duration: 800
                });

                sessionStorage.clear();

                // 更改vuex
                ['loginState', "keepUserAuth", "keepSysUser", "keepTokenId"].forEach((ele) => {
                    this[ele](null);
                });

                // 情况cookie
                Object.keys(cookie.get()).forEach((ele) => {
                    cookie.remove(ele)
                });

                this.$router.push('/login');
            }).catch(() => {
                this.$refs.elMenu.activeIndex = '1';
                this.$message({
                    type: "info",
                    message: "已取消",
                    duration: 800
                });
            });
        }
    }
};
</script>

<style lang="scss" scoped="scoped">
a {
    text-decoration: none;
}
li:hover {
    color: #20a0ff;
}
.g-topNavbar{
    padding: 0 20px;
    height: 80px;
    display: flex;
    align-items: center;
    h3{
        font-size: 18px;
        font-weight: normal;
        flex: 1;
    }
    .el-menu{
        background-color: inherit;
        .el-menu-item {
            position: relative;
            line-height: 80px;
            height: 80px;
            [class^=el-icon-]{
                width: auto;
                &:before{
                    font-size: 16px;
                }
            }
            .el-badge{
                position: absolute;
                left:28px;
                top: -12px
            }
        }
    }
}

.m-reset-form{
    margin: 0 auto;
    width: 350px;
    padding-right: 120px;
}
.dialog-footer{
    text-align: center;
    position: relative;
    top: -31px;
}
</style>
